﻿<UserControl 
    x:Class="Rage.UI.RangeSlider"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    mc:Ignorable="d" d:DesignWidth="100" d:DesignHeight="100">

    <Grid x:Name="LayoutRoot" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.Resources>
            <ControlTemplate x:Key="buttonTemplate" TargetType="RepeatButton">
                <!-- just empty-->
                <Grid />
            </ControlTemplate>
            <ControlTemplate x:Key="sliderTemplateHorizontal" TargetType="Slider">
                <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <RepeatButton Template="{StaticResource buttonTemplate}" IsTabStop="False" IsEnabled="False" x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0"/>
                    <Thumb IsTabStop="True" x:Name="HorizontalThumb" Height="18" Width="11" Grid.Column="1" Margin="0">
                        <Thumb.Template>
                            <ControlTemplate TargetType="Thumb">
                                <Rectangle StrokeThickness="1" RadiusX="2" RadiusY="2">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="White" Offset="0" />
                                            <GradientStop Color="#FFDEDEDE" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                    <Rectangle.Stroke>
                                        <LinearGradientBrush>
                                            <GradientStop Color="#FFA3AEB9" Offset="0" />
                                            <GradientStop Color="#FF8399A9" Offset="0.375" />
                                            <GradientStop Color="#FF718597" Offset="0.4" />
                                            <GradientStop Color="#FF617584" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Stroke>
                                </Rectangle>
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>
                    <RepeatButton Template="{StaticResource buttonTemplate}" IsTabStop="False" IsEnabled="False" x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2"/>
                </Grid>
            </ControlTemplate>
            <ControlTemplate x:Key="sliderTemplateVertical" TargetType="Slider">
                <Grid x:Name="VertTemplate" Background="{TemplateBinding Background}">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <RepeatButton Template="{StaticResource buttonTemplate}" IsTabStop="False" IsEnabled="False" x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" Grid.Row="0"/>
                    <Thumb IsTabStop="True" x:Name="VerticalThumb" Height="11" Width="18" Grid.Row="1" Margin="0">
                        <Thumb.Template>
                            <ControlTemplate TargetType="Thumb">
                                <Rectangle StrokeThickness="1" RadiusX="2" RadiusY="2">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="White" Offset="0" />
                                            <GradientStop Color="#FFDEDEDE" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                    <Rectangle.Stroke>
                                        <LinearGradientBrush>
                                            <GradientStop Color="#FFA3AEB9" Offset="0" />
                                            <GradientStop Color="#FF8399A9" Offset="0.375" />
                                            <GradientStop Color="#FF718597" Offset="0.4" />
                                            <GradientStop Color="#FF617584" Offset="1" />
                                        </LinearGradientBrush>
                                    </Rectangle.Stroke>
                                </Rectangle>
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>
                    <RepeatButton Template="{StaticResource buttonTemplate}" IsTabStop="False" IsEnabled="False" x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" Grid.Row="2"/>
                </Grid>
            </ControlTemplate>
        </Grid.Resources>
        
        <!-- The Ticks Row -->
        <Canvas x:Name="bottomTicksCanvas" Margin="1,12,1,2" Height="16" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
        <Canvas x:Name="rightTicksCanvas" Margin="12,1,2,1" MinWidth="25" Visibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Left"/>

        <!-- The center line, what the slider grips slide on -->
        <Border x:Name="TheLineHorizontal" BorderThickness="1"
                VerticalAlignment="Top" HorizontalAlignment="Stretch"
                Height="3" Margin="5,7,5,0" CornerRadius="1" Visibility="Visible">
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0" />
                    <GradientStop Color="#FF8399A9" Offset="0.375" />
                    <GradientStop Color="#FF718597" Offset="0.4" />
                    <GradientStop Color="#FF617584" Offset="1" />
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Grid Background="#FFE6EFF7" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </Border>
        <Border x:Name="TheLineVertical" BorderThickness="1"
                HorizontalAlignment="Left" VerticalAlignment="Stretch"
                Width="3" Margin="7,5,0,5" CornerRadius="1" Visibility="Visible">
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0" />
                    <GradientStop Color="#FF8399A9" Offset="0.375" />
                    <GradientStop Color="#FF718597" Offset="0.4" />
                    <GradientStop Color="#FF617584" Offset="1" />
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Grid Background="#FFE6EFF7" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </Border>

        <!-- The lower/lesser slider grip -->
        <Slider x:Name="LowerSliderH" VerticalAlignment="Top"    Visibility="Visible" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" Value="{Binding LowerValue, Mode=TwoWay}" Margin="0,0,10,0" Template="{StaticResource sliderTemplateHorizontal}" />
        <Slider x:Name="LowerSliderV" HorizontalAlignment="Left" Visibility="Visible" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" Value="{Binding LowerValue, Mode=TwoWay}" Margin="0,0,0,10" Template="{StaticResource sliderTemplateVertical}" />

        <!-- The upper/greater slider grip -->
        <Slider x:Name="UpperSliderH" VerticalAlignment="Top"    Visibility="Visible" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" Value="{Binding UpperValue, Mode=TwoWay}" Margin="10,0,0,0" Template="{StaticResource sliderTemplateHorizontal}" />
        <Slider x:Name="UpperSliderV" HorizontalAlignment="Left" Visibility="Visible" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" Value="{Binding UpperValue, Mode=TwoWay}" Margin="0,10,0,0" Template="{StaticResource sliderTemplateVertical}" />
            
    </Grid>
</UserControl>
